<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车案例</title>
    <style>
      table {
        width: 800px;
        height: 300px;
        text-align: center;
        margin: 50px auto 0;
        border-collapse: collapse;
      }
      table,
      td {
        border: 1px solid #eeeeee;
      }
      .header-tr,
      .footer-tr {
        height: 47px;
      }

      .my-ipt {
        width: 25px;
        outline: none;
      }
      .price-sum {
        width: 150px;
      }
      .footer-td {
        text-align: right;
        padding-right: 25px;
      }
      .footer-td .num,
      .footer-td .price {
        color: #fd1d02;
        font-weight: 600;
      }
      .sum-price {
        margin-left: 30px;
      }
      .remove-all {
        margin-right: 448px;
      }
      .remove-item:hover,
      .remove-all:hover {
        color: #fd1d02;
        cursor: pointer;
        text-decoration: underline;
      }

      /* 隔行变色 */
      .item:hover {
        background-color: #eeeeee;
      }
    </style>
    <script src="lib/jQuery-v3.6.0.min.js"></script>
  </head>
  <body>
    <table>
      <tr class="header-tr">
        <td>
          <input type="checkbox" class="checkAll" id="all" />
          <label for="all">全选</label>
        </td>
        <td>书名</td>
        <td>单价</td>
        <td>数量</td>
        <td>小计</td>
        <td>操作</td>
      </tr>
      <tr class="item">
        <td>
          <input type="checkbox" class="t-checkbox" />
        </td>
        <td>Vue</td>
        <td class="price">￥12.80</td>
        <td>
          <input type="button" class="sub" value="-" />
          <input type="text" class="my-ipt" value="1" />
          <input type="button" class="add" value="+" />
        </td>
        <td class="price-sum">￥12.80</td>
        <td class="remove-item">删除</td>
      </tr>
      <tr class="item">
        <td>
          <input type="checkbox" class="t-checkbox" />
        </td>
        <td>React</td>
        <td class="price">￥16.80</td>
        <td>
          <input type="button" class="sub" value="-" />
          <input type="text" class="my-ipt" value="1" />
          <input type="button" class="add" value="+" />
        </td>
        <td class="price-sum">￥16.80</td>
        <td class="remove-item">删除</td>
      </tr>
      <tr class="item">
        <td>
          <input type="checkbox" class="t-checkbox" />
        </td>
        <td>Angular</td>
        <td class="price">￥18.80</td>
        <td>
          <input type="button" class="sub" value="-" />
          <input type="text" class="my-ipt" value="1" />
          <input type="button" class="add" value="+" />
        </td>
        <td class="price-sum">￥18.80</td>
        <td class="remove-item">删除</td>
      </tr>
      <tr class="item">
        <td>
          <input type="checkbox" class="t-checkbox" />
        </td>
        <td>JavaScript</td>
        <td class="price">￥22.80</td>
        <td>
          <input type="button" class="sub" value="-" />
          <input type="text" class="my-ipt" value="1" />
          <input type="button" class="add" value="+" />
        </td>
        <td class="price-sum">￥22.80</td>
        <td class="remove-item">删除</td>
      </tr>
      <tr class="footer-tr">
        <td colspan="6" class="footer-td">
          <span class="remove-all">清空</span>
          <span>已选 <span class="num">1</span> 件商品</span>
          <span class="sum-price">总价：<span class="price">￥12.80</span></span>
        </td>
      </tr>
    </table>

    <script>
      $(function () {
        // 1、全选按钮选中，其他每一项都选中
        $('.checkAll').change(function () {
          $('.t-checkbox').prop('checked', $('.checkAll').prop('checked'))
        })

        // 2、如果每一项都选中，则全选按钮选中，否则全选按钮不选中
        $('.t-checkbox').change(function () {
          // console.log($('.t-checkbox:checked').length)  // 判断 每一项选中的个数
          // console.log($('.t-checkbox').length)  // 列表总的个数

          if ($('.t-checkbox:checked').length === $('.t-checkbox').length) {
            $('.checkAll').prop('checked', true)
          } else {
            $('.checkAll').prop('checked', false)
          }
        })

        // 加和减
        $('.add').click(function () {
          // 注意：为了只操作当前元素，需要用到 $(this).siblings('.my-ipt')，而不是直接 $('.my-ipt')
          // 获取文本框的值
          let n = $(this).siblings('.my-ipt').val()
          n++
          // 将新值赋值给文本框
          $(this).siblings('.my-ipt').val(n)

          // 获取单价
          let p = $(this).parent().siblings('.price').html()
          p = p.substr(1) // 截取掉 ￥
          let sumP = (p * n).toFixed(2)
          // 赋值
          $(this)
            .parent()
            .siblings('.price-sum')
            .html('￥' + sumP)

          getSum()
        })
        $('.sub').click(function () {
          // 获取文本框的值
          let n = $(this).siblings('.my-ipt').val()
          if (n == 1) {
            return false
          }
          n--
          // 将新值赋值给文本框
          $(this).siblings('.my-ipt').val(n)

          // 获取单价
          let p = $(this).parent().siblings('.price').html()
          p = p.substr(1)
          let sumP = (p * n).toFixed(2)
          // 赋值
          $(this)
            .parent()
            .siblings('.price-sum')
            .html('￥' + sumP)

          getSum()
        })

        // 文本框的改变事件
        $('.my-ipt').change(function () {
          let n = $(this).val()
          // 获取单价
          let p = $(this).parent().siblings('.price').html()
          p = p.substr(1)
          let sumP = (p * n).toFixed(2)
          // 赋值
          $(this)
            .parent()
            .siblings('.price-sum')
            .html('￥' + sumP)

          getSum()
        })

        // dom 结构加载完就调用函数
        getSum()
        // 计算总计和总额的函数
        function getSum() {
          var count = 0 // 总计数
          var money = 0 // 总额
          // 计算总计数
          $('.my-ipt').each(function (index, domEle) {
            count += parseInt($(domEle).val())
          })
          $('.footer-td .num').text(count)

          // 计算总额
          $('.price-sum').each(function (index, domEle) {
            money += parseFloat($(domEle).text().substr(1))
          })
          $('.footer-td .price').text('￥' + money.toFixed(2))
        }

        // 删除每一项
        $('.remove-item').click(function () {
          $(this).parent('.item').remove()
          getSum()
        })

        // 清空所有
        $('.remove-all').click(function () {
          $('.item').remove()
          getSum()
        })
      })
    </script>
  </body>
</html>
